<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $('.hide').click(function () {
            //     $('.box').hide();
            // });
            // $('.show').click(function () {
            //     $('.box').show();
            // });
            // $('.toggle').click(function () {
            //     $('.box').toggle();
            // });

//参数slow 慢速 渐变的过程
//             $('.hide').click(function () {
//                 $('.box').hide('slow');
//             });
//             $('.show').click(function () {
//                 $('.box').show('slow');
//             });
//             $('.toggle').click(function () {
//                 $('.box').toggle('slow');
//             });
//参数fast 快速 渐变的过程
//             $('.hide').click(function () {
//                 $('.box').hide('fast');
//             });
//             $('.show').click(function () {
//                 $('.box').show('fast');
//             });
//             $('.toggle').click(function () {
//                 $('.box').toggle('fast');
//             });
//参数number 可以自己设置
//             $('.hide').click(function () {
//                 $('.box').hide(1000);
//             });
//             $('.show').click(function () {
//                 $('.box').show(1000);
//             });
//             $('.toggle').click(function () {
//                 $('.box').toggle(1000);
//             });
//回调函数
//             $('.hide').click(function () {
//                 $('.box').hide(1000,function () {
//                     alert('隐藏完成')
//                 });
//             });
//             $('.show').click(function () {
//                 $('.box').show(1000,function () {
//                     alert('显示完成');
//                 });
//             });
//             $('.toggle').click(function () {
//                 $('.box').toggle(1000);
//             });
///////////////////////////////
//逐个执行动画效果 第一种方法
//             $('.show').click(function () {//逐个执行动画效果 写函数有点复杂 第一种方法:
//                 $('.box').eq(0).show('fast',function () {
//                     $('.box').eq(1).show('fast',function () {
//                         $('.box').eq(2).show('fast',function (){
//                             alert('已完成');
//                         });
//                     });
//                 });
//             });
//逐个执行动画效果 第二种方法 嵌套
//             $('.show').click(function () {
//                 $('.box').first().show('fast',function test() {
//                     $(this).next().show('fast',test);
//                 });
//             });
/////////////////////////////////////////////////////////////
//             $('.hide').click(function () {
//                 $('.box').slideUp();//向上卷起
//             });
//             $('.hide').click(function () {
//                 $('.box').slideUp('fast',function () {
//                     alert("向上")
//                 });//向上卷起
//             });
//
//             $('.show').click(function () {
//                 $('.box').slideDown('fast',function () {
//                     alert("向下")
//                 });//向下伸展
//             });
//
//             $('.toggle').click(function () {
//                 $('.box').slideToggle('fast');//交替
//             });
/////////////////////////////////////////////////////////////////////
//淡出效果
        $('.out').click(function () {
            $('.box').fadeOut('slow');
         });
//淡入效果
         $('.in').click(function () {
                $('.box').fadeIn('slow');
            });
//交替
            $('.toggle').click(function () {
                $('.box').fadeToggle('slow');
            });
        });
    </script>
</head>
<body>
<!--    <input class="hide" type="button" value="隐藏">-->
<!--    <input class="show" type="button" value="显示">-->
<!--    <input class="toggle" type="button" value="隐藏或显示">-->
<!--    <div class="box" style="width: 100px;height: 100px;background-color: #bfa">div</div>-->
<!--    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;display: none" >你</div>-->
<!--    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;display: none">好</div>-->
<!--    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;display: none">jQuery</div>-->
<input class="in" type="button" value="in">
<input class="out" type="button" value="out">
<input class="toggle" type="button" value="toggle">
    <div class="box" style="width: 100px;height: 100px;background-color: #bfa;">div</div>
<script>
    /*1.显示 隐藏动画效果
        hide([slow|normal|fast|number],fun);
        show([slow|normal|fast|number],fun);
        toggle([slow|normal|fast|number],fun);

        $('.hide').click(function () {
                $('.box').hide();
            });
            $('.show').click(function () {
                $('.box').show();
            });
            $('.toggle').click(function () {
                $('.box').toggle();
            });
 //执行动画效果的方法
$('.show').click(function () {
    $('.box').first().show('fast',function test() {
        $(this).next().show('fast',test);
    });
});
//向上卷起 //向下伸展// 交替
$('.hide').click(function () {
    $('.box').slideUp('fast',function () {
        alert("向上")
    });//向上卷起
});
$('.show').click(function () {
    $('.box').slideDown('fast',function () {
        alert("向下")
    });//向上卷起
});
$('.toggle').click(function () {
    $('.box').slideToggle('fast');//交替
});
2.预制过度效果
    //淡出效果
        $('.out').click(function () {
            $('.box').fadeOut('slow');
         });
//淡入效果
         $('.in').click(function () {
                $('.box').fadeIn('slow');
            });
//交替
            $('.toggle').click(function () {
                $('.box').fadeToggle('slow');
            });
    *
    * */
</script>
</body>
</html>